<!-- 发布吐槽 -->
<template>
  <div class="fire">
    <NavBar2 :fnTitle="title"></NavBar2>
    <div class="content">
      <van-notify v-model="show2" type="success">
        <van-icon name="bell" style="margin-right: 4px;" />
        <span>保存成功</span>
      </van-notify>
      <van-notify v-model="show4" type="warning">
        <van-icon name="bell" style="margin-right: 4px;" />
        <span>最多两张图片</span>
      </van-notify>
      <div class="send_info">
        <textarea id="send_info_text" placeholder="分享你的故事" v-model="tabletext">
        </textarea>
      </div>
      <div class="send_function">
      <van-uploader :after-read="afterRead"  v-model="fileList" :deletable="true" ref="file">
         
      </van-uploader>   
      </div>

        <div class="fun">
          <van-icon name="aim" size="25" />
          <span @click="showtopic">有关话题</span>
          <span style="float:right;padding-right:20px;padding-top:5px;color:skyblue;vertical:middle;">{{a_topic}}</span>
        </div>
        <div class="fun">
          <van-icon name="smile-o" size="25" />
          <span @click="showPopup">添加表情</span>
        </div>
        <!-- 表情库 -->
        <van-dialog v-model="show" title="表情包" show-cancel-button>
          <div class="info_show">
              <div class="memedata" :data="expression" v-for="item in expression" :key="item.id" >
                <br>
                <van-row>
                 <div>
                   <img :src="item.meme" alt="" width="150">
                 </div>
                <button class="btn"  @click="showPopclose(item.id)">选择</button>
                 </van-row>
              </div>
          </div>
        </van-dialog>
        <!-- 话题 -->
        <van-dialog v-model="show3" title="话题库" show-cancel-button>
          <div class="info_show">
              <div class="memedata" :data="expression2" v-for="item in expression2" :key="item.id" >
                <br>
                <van-row>
                  <div>{{item.topic}}</div>
                <button class="btn"  @click="showTopclose(item.id)">选择</button>
                 </van-row>
              </div>
          </div>
        </van-dialog>
      </div>
      <div class="memedata">
        <img :src="a_meme" alt="" width="150" >
      </div>
      <div class="btn_box"><button class="btn" @click="locationText">保存</button></div>
    </div>
</template>

<script>

import NavBar2 from '@/components/NavBar2'
import Vue from 'vue'
import { Dialog } from 'vant'
import axios from 'axios'
Vue.use(axios)
Vue.use(Dialog)
export default {
  created() {
    this.GetAll()
    this.topicAll()
  },
  data() {
    return {
      title: '发布吐槽',
      checked: true,
      tabletext: '',
      expression:[],
      expression2:[],
      a_meme:'',    
      a_topic:'',    
      show:false,
      show2:false,
      show3:false,
      show4:false,
      value: '',
      tabletext: '',
      fileList:[],
      fileList_get:[]
    }
  },
  components: {
    NavBar2
  },
  methods: {
    showPopup() {
      this.show = true
    },
    showtopic() {
      this.show3 = true
    },
    showNotify() {
      this.show2 = true;
      setTimeout(() => {
        this.show2 = false;
      }, 2000);
    },
    showNotify2() {
      this.show4 = true;
      setTimeout(() => {
        this.show4 = false;
      }, 2000);
    },
    afterRead(files) {
      const that = this;
       const file = new FormData();
       file.append("file", files.file);
       axios.post('http://39.96.36.251/api/file/photo',file,{
         headers: {
           "content-type":"multipart/form-data"
         }
       })
       .then(function(res){
        that.fileList_get.push(res.data)
        if(that.fileList_get.length >= 3)
      {
        that.showNotify2()
        that.$delete(that.fileList_get,2)
        that.$delete(that.fileList,2)
      }
    })
       

    },
    showPopclose(val) {
      this.show = false
      this.getit(val)
    },
    showTopclose(val) {
      this.show3 = false
      this.gettopic(val)
    },
    locationText() {
      var val = this.tabletext
      sessionStorage.setItem('FireText', val)
      sessionStorage.setItem('FireMeme', this.a_meme)
      sessionStorage.setItem('FireTopic', this.a_topic)
      sessionStorage.setItem("Firepicture1",this.fileList_get[0])
      sessionStorage.setItem("Firepicture2",this.fileList_get[1])
      this.showNotify()
    },
    GetAll() {
      const that = this
      axios.get('http://39.96.36.251/api/tucao/showallmeme')
      .then(function(res){
        that.expression = res.data.data
      })
    },
    getit(val) {
      const that = this
      axios.post('http://39.96.36.251/api/tucao/getmeme',{
        id:val
      })
      .then(function(res){
        that.a_meme = res.data.data
      })
      .catch(function(err){
        console.log(err);
      })
    },
    topicAll() {
      const that = this
      axios.get('http://39.96.36.251/api/tucao/showalltopic')
      .then(function(res){
        that.expression2 = res.data.data
      })
    },
    gettopic(val) {
      const that = this
      axios.post('http://39.96.36.251/api/tucao/gettopic',{
        id:val
      })
      .then(function(res){
        that.a_topic = res.data.data
      })
      .catch(function(err){
        console.log(err);
      })
    }
  }
}
</script>

<style scoped>
.memedata {
  text-align: center;
}
.info_show {
  height: 500px;
  /* width: 300px; */
  overflow: hidden;
  overflow-y: scroll;
}
.btn_box {
  text-align: center;
}
.btn {
  margin-top: 1%;
  border: .026667rem solid #fff;
  border-radius: .533333rem;
  background-color: rgb(243, 133, 60);
  color: #fff;
  width: 30%;
  height: .8rem;
}
#send_info_text {
  margin-top: 5px;
  display: block;
  width: calc(90vw);
  padding: 10px;
  height: calc(40vh);
  margin: 0 auto;
  background-color: rgba(228, 228, 228, 0.644);
  border: none;
  outline: none;
  resize:none;
}
.send_function {
  margin-top: 5px;
  width: calc(90vw);
  padding: 10px;
  margin: 0 auto;
  /* vertical-align: middle; */
}
.send_function span {
  /* display: inline-block; */
  /* height: 25px; */
  vertical-align: middle;
  margin-left: 15px;
  font-size: 15px;
}
.fun {
  height: 50px;
  padding: 0 15px;
  margin: 10px 0;
  /* vertical-align: middle!important; */
}
.van-icon {
  vertical-align: middle!important;
}
.van-switch {
  float: right;
}
</style>